<script setup>
  import { onMounted, ref, computed } from 'vue'
  import { onLoad, onShow } from '@dcloudio/uni-app'

  import Api from './api/index.js'
  const __Api = new Api()
  const id = ref(null)
  const pageData = ref({})
  const rewardObj = ref({})
  const animationBool = ref(false)
  const rewardNum = ref(0)
  function ischecked(item) {
    const isHas = checkArr.value.map((e) => e.id).indexOf(item.id)
    if (isHas > -1) {
      return true
    } else {
      return false
    }
  }
  const listData = computed(() => {
    if (pageData.value) {
      const Obj = pageData.value
      return tabkey.value == 1
        ? Obj.goods_grade1
        : tabkey.value == 2
        ? Obj.goods_grade2
        : Obj.goods_grade3
    } else {
      return []
    }
  })
  onLoad((option) => {
    console.log(option.id)
    id.value = option.id
    console.log(id.value)
    __Api.energyDetails({ id: option.id }).then((res) => {
      pageData.value = res.data
      console.log(pageData)
    })
  })
  const checkArr = ref([])
  const tabkey = ref(1) // 1,2,3
  const maskBool = ref(false)
  function listItemClick(item) {
    const carr = checkArr.value
    if (carr.length == 0) {
      checkArr.value = [item]
    } else {
      const isHas = carr.map((e) => e.grade).indexOf(item.grade)
      if (isHas > -1) {
        checkArr.value = carr.map((e) => {
          if (e.grade == item.grade) {
            return item
          } else {
            return e
          }
        })
      } else {
        checkArr.value = carr.concat([item])
      }
    }
    console.log(checkArr.value)
  }
  function changeTab(e) {
    if (tabkey.value != e) {
      tabkey.value = e
    }
  }
  function getBlind() {
    const carr = checkArr.value
    const arr = carr.map((res) => +res.grade)
    console.log(arr)
    if (arr.indexOf(1) < 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择普通奖品',
      })
      return false
    }
    if (arr.indexOf(2) < 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择稀有奖品',
      })
      return false
    }
    if (arr.indexOf(3) < 0) {
      uni.showToast({
        icon: 'none',
        title: '请选择史诗奖品',
      })
      return false
    }
    // this.rewardObj = res.data
    __Api
      .energyPost({ idArr: carr.map((e) => e.id), id: id.value })
      .then((res) => {
        if (res.st == 1) {
          rewardObj.value = res.data
          uni.vibrateLong({
            success: function () {
              console.log('success')
            },
          })
          if (res.data.hero_goods.id) {
            console.log(11111111)
            rewardNum.value = 2
            animationBool.value = true
            maskBool.value = true
          } else {
            console.log('22222222222222')
            rewardNum.value = 1
            maskBool.value = true
            animationBool.value = true
          }
        } else {
          uni.showToast({
            icon: 'none',
            title: res.msg,
          })
        }
      })
  }
  function getBlindFinish() {
    rewardNum.value = rewardNum.value - 1
    animationBool.value = false
    setTimeout(() => {
      animationBool.value = true
    }, 50)
    if (rewardNum.value == 0) {
      maskBool.value = false
    }
  }

  function goBack() {
    console.log(1)
    uni.navigateBack()
  }
  onShow(() => {
    // uni.hideTabBar()
  })
</script>

<template>
  <view class="warp">
    <view class="war-top">
      <view class="war-back" @click="goBack()">
        <view class="back-aim"> </view>
      </view>
    </view>
    <image
      class="bgImg"
      src="https://ojqn.wm2177.com/wechat_imgs/ball/detail-bg.png"
      mode=""
    ></image>
    <view class="content">
      <view class="detail_top">
        <image class="imagebg" :src="pageData.bg_img" mode=""></image>
        <image class="image_type" :src="pageData.icon" mode=""></image>
      </view>
      <view class="tab">
        <image
          @click="changeTab(1)"
          :src="`https://ojqn.wm2177.com/wechat_imgs/ball/ordinary${
            tabkey == 1 ? '-active' : ''
          }.png`"
          mode=""
        ></image>
        <image
          @click="changeTab(2)"
          :src="`https://ojqn.wm2177.com/wechat_imgs/ball/scarce${
            tabkey == 2 ? '-active' : ''
          }.png`"
          mode=""
        ></image>
        <image
          @click="changeTab(3)"
          :src="`https://ojqn.wm2177.com/wechat_imgs/ball/epic${
            tabkey == 3 ? '-active' : ''
          }.png`"
          mode=""
        ></image>
      </view>
      <view class="list_Box" v-if="listData">
        <view
          v-for="(item, index) in listData"
          :key="index"
          class="list_item"
          @click="listItemClick(item)"
        >
          <img style="width: 100%; height: 100%" :src="item.img" alt="" />
          <view class="imgmask" v-if="ischecked(item)">
            <img class="yesed" src="../../static/yesed.png" alt="" />
          </view>
        </view>
        <view
          v-for="index in 3 - (listData.length % 3)"
          :key="index"
          style="width: 220rpx"
        ></view>
      </view>
    </view>
    <image
      @click="getBlind()"
      class="openBtn"
      src="https://ojqn.wm2177.com/wechat_imgs/ball/open-btn.png"
      mode=""
    ></image>
    <view class="mask" v-if="maskBool">
      <img
        v-if="rewardNum == 2"
        style="width: 543rpx; height: 229rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/ball/get-big.png"
      />
      <img
        v-if="rewardNum == 1"
        style="width: 303rpx; height: 79rpx"
        src="https://ojqn.wm2177.com/wechat_imgs/ball/get.png"
      />
      <view class="blind_box" id="animation_crazy" v-if="animationBool">
        <image
          class="blind_img"
          :src="rewardNum > 1 ? rewardObj.hero_goods.img : rewardObj.data.img"
          mode=""
        ></image>
        <image
          class="rule_img"
          :src="
            rewardNum > 1
              ? rewardObj.hero_goods.rule_img
              : rewardObj.data.rule_img
          "
          mode=""
        ></image>
      </view>
      <image
        class="finishBtn"
        style=""
        @click="getBlindFinish()"
        src="https://ojqn.wm2177.com/wechat_imgs/ball/get-take.png"
      ></image>
    </view>
  </view>
</template>
<style lang="less" scoped>
  .war-top {
    padding-left: 18rpx;
    position: fixed;
    z-index: 999;
    top: 88rpx;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    .war-back {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 57rpx;
      height: 57rpx;
      background-color: rgba(7, 1, 53, 0.5);
      border-radius: 50%;

      .back-aim {
        width: 20rpx;
        height: 20rpx;
        border-top: 4rpx solid #fff;
        border-left: 4rpx solid #fff;
        transform: rotate(-45deg);
      }
    }
  }
  .warp {
    width: 100%;
    height: 100vh;
    position: relative;
    .bgImg {
      width: 100%;
      height: 100%;
    }
    .content {
      padding-top: 190rpx;
      position: absolute;
      width: 100%;
      height: 100%;
      overflow-y: scroll;
      top: 0;
      left: 0;
      z-index: 100;
      box-sizing: border-box;
      .tab {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 58rpx;
        image {
          width: 220rpx;
          height: 54rpx;
          // margin: 0 10rpx;
        }
      }
      .detail_top {
        width: 418rpx;
        height: 418rpx;
        margin: 0 auto;
        margin-top: 84rpx;
        position: relative;
        .imagebg {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 50%;
          right: 50%;
          margin-left: -209rpx;
        }
        .image_type {
          position: absolute;
          width: 128rpx;
          height: 128rpx;
          top: 50%;
          left: 50%;
          margin-top: -64rpx;
          margin-left: -64rpx;
        }
      }
      .list_Box {
        width: 100%;
        height: 700rpx;
        margin-top: 20px;
        overflow-y: auto; /* 使得内容可以垂直滚动 */
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        padding: 0 20rpx 80rpx 20rpx;
        box-sizing: border-box;
        .list_item {
          width: 220rpx;
          height: 220rpx;
          margin-bottom: 20rpx;
          // background: rgba(255, 255, 255, 0.1);
          background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
          backdrop-filter: blur(10rpx); /* 背景模糊 */
          -webkit-backdrop-filter: blur(10rpx); /* 兼容老版本 Safari */

          border-radius: 8rpx;
          overflow: hidden;
          position: relative;
          .imgmask {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.35);
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            .yesed {
              width: 60rpx;
              height: 60rpx;
            }
          }
        }
      }
      // .list_Box::after {
      //   content: '';
      //   width: 220px;
      //   flex-basis: 0;

      //   /* 不可以提供高度 */
      //   /* height: 200px; */
      // }
    }
    .openBtn {
      position: fixed;
      z-index: 999;
      width: 468rpx;
      height: 84rpx;
      left: 50%;
      right: 50%;
      margin-left: -234rpx;
      bottom: 60rpx;
    }
  }
  .mask {
    position: fixed;
    top: 0;
    z-index: 10001;
    height: 100vh;
    width: 100%;
    padding: 0 30rpx;
    box-sizing: border-box;
    background-color: RGBA(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 260rpx;
    .finishBtn {
      position: absolute;
      bottom: 260rpx;
      width: 348rpx;
      height: 77rpx;
      left: 50%;
      margin-left: -174rpx;
    }
    .blind_box {
      margin-top: 80rpx;
      width: 452rpx;
      height: 452rpx;
      position: relative;
      background-color: rgba(255, 255, 255, 0.1); /* 半透明背景 */
      backdrop-filter: blur(10rpx); /* 背景模糊 */
      -webkit-backdrop-filter: blur(10rpx); /* 兼容老版本 Safari */
      image {
        display: inline-block;
      }
      .blind_img {
        width: 100%;
        height: 100%;
        border: 4rpx solid #fff5d8;
        border-radius: 8rpx;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20rpx;
      }
      .rule_img {
        position: absolute;
        top: -48rpx;
        left: -28rpx;
        width: 178rpx;
        height: 183rpx;
      }
    }
  }
</style>
